import Taro, { useDidShow } from '@tarojs/taro';
import { useState } from 'react';
import RecordItem from '../../components/attendanceRecordItem';
import { Cell } from '@nutui/nutui-react-taro';
import { Api } from '../../api'



export default function VacateRecord() {

  const [record, setRecord] = useState<any[]>([]);

  useDidShow(() => {
    //Taro 提供的同步获取本地存储数据的 API,从缓存中获取token, 
    const token = Taro.getStorageSync('token');
    console.log(token);
    // token不存在则跳转到登录页
    if (!token) {
      Taro.reLaunch({ url: '/pages/login/index' });
      return;
    }
    //Api.getAttendances函数接收一个参数id，它是从本地存储中获取的用户的ID。
    //函数返回一个Promise，当Promise被解析时，它会将结果存储在res变量中。
    Api.getAttendances(Number(token.id)).then((res: any) => {
      console.log('getAttendances: 1234', res);
      if (res.success) {
        setRecord(res.data.data.slice(0, 7)); // 只展示七条数据
      }
    });
  });

  return (
    <div className="page-container">
      {/* 遍历record数组，将每个元素传递给RecordItem组件 */}
      {/* {record.map((item) => (
        // 每个RecordItem组件都需要一个唯一的key值，这里使用item.id作为key值。
        <Cell key={item.id}>
          <RecordItem record={item} />
        </Cell>
      ))} */}

      {record.map((item) => {
        console.log(item); // 在控制台输出 item 的值
        console.log(item.id); // 在控制台输出 item.id 的值
        return (
          <Cell key={item.id}>
            <RecordItem record={item} />
          </Cell>
        );
      })}

    </div>
  );
}
